<template>
  <h1 class="title">视频管理</h1>
  <div class="header">
    <div>
      <label>视频名称: </label>
      <el-input
          v-model="formData.video_name"
          style="width: 240px"
          placeholder="Please input"
          clearable
      />
    </div>
    <div>
      <label>创建者姓名: </label>
      <el-input
          v-model="formData.username"
          style="width: 240px"
          placeholder="Please input"
          clearable
      />
    </div>
    <div>
      <label>视频创建时段: </label>
      <el-date-picker
          v-model="times"
          type="daterange"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="handleTimes"
          clearable
      />
    </div>
    <el-button type="primary" @click="handleSelect">查询</el-button>
  </div>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first">
      <VideoList :data="selectData" @limitPage="handleLimitPage('first',$event)"/>
    </el-tab-pane>
    <el-tab-pane label="待审核" name="second">
      <VideoList :data="selectData" @limitPage="handleLimitPage('second',$event)"/>
    </el-tab-pane>
    <el-tab-pane label="已通过" name="third">
      <VideoList :data="selectData" @limitPage="handleLimitPage('third',$event)"/>
    </el-tab-pane>
    <el-tab-pane label="未通过" name="fourth">
      <VideoList :data="selectData" @limitPage="handleLimitPage('fourth',$event)"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import {ref, onMounted, reactive} from 'vue'
import VideoList from "@/views/videos/component/VideoList.vue";
import {getVideoList} from '@/apis/apis.js'
import {ElMessage} from "element-plus";

onMounted(() => {
  handleSelect();
})
//时段选择
const times = ref('')
//响应传给子组件的data
const selectData = ref({})
//传给后端的
const formData =
    reactive({
      username: '',
      video_name: '',
      start_time: '',
      end_time: '',
      ispass: null,
      page: '',
      page_size: '',
    })
const activeName = ref('first')
//四个分页互不影响
const tabPages = reactive({})

//处理时间
const handleTimes = (val) => {
  if (val && val.length === 2) {
    const formattedTimes = val.map(date => formatDate(date));
    formData.start_time = formattedTimes[0];
    formData.end_time = formattedTimes[1];
    console.log(formData);
  } else {
    formData.start_time = null;
    formData.end_time = null;
  }
}
//转换时间格式
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
//切换tabs逻辑
const handleClick = (tab) => {
  console.log(tab.props.name);
  const name = tab.props.name;
  if (name === 'first') {
    formData.ispass = null;
  } else if (name === 'second') {
    formData.ispass = 0;
  } else if (name === 'third') {
    formData.ispass = 1;
  } else if (name === 'fourth') {
    formData.ispass = 2;
  }
  formData.page = tabPages[tab.props.name].page;
  formData.page_size = tabPages[tab.props.name].pageSize;
  handleSelect();
}
//后端更新视频列表
const fetchVideos = async (data) => {
  try {
    const rep = await getVideoList(data);
    if (rep.data.status === 1) {
      selectData.value = rep.data.data
      // console.log(selectData.value)
    } else {
      ElMessage.error(rep.data.msg)
    }
  } catch (err) {
    console.log(err)
    ElMessage.error("连接失败!")
  }
}
//处理查询逻辑
const handleSelect = () => {
  fetchVideos(formData)
}
//处理子组件传来的分页data
const handleLimitPage = (tabName, pageData) => {
  tabPages[tabName] = pageData;
  console.log("tabPages", tabPages);
  formData.page = tabPages[tabName].page;
  formData.page_size = tabPages[tabName].pageSize;
  handleSelect();
}
</script>

<style scoped>
.header {
  display: flex;
  margin: 20px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 10px #a9d6ff;
  gap: 20px;
}

.demo-tabs {
  padding: 30px;
  background: rgba(255, 223, 187, 0);
  box-shadow: 0 0 10px rgba(255, 223, 187);
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: rgba(255, 0, 0, 0.7);
  font-size: 32px;
  font-weight: 600;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 30px;
}
</style>
